<template>
  <!-- 区域位置告警 -->
  <div class="areapositionalarm">
    <basic-container>
      <avue-crud
        :option="option"
        :table-loading="loading"
        :data="data"
        :page.sync="page"
        :search.sync="searchObj"
        v-model="form"
        ref="crud"
        @selection-change="selectionChange"
        @search-change="searchChange"
        @search-reset="searchReset"
        @current-change="currentChange"
        @size-change="sizeChange"
        @refresh-change="refreshChange"
      >
        <!-- 开始时间搜索栏自定义 -->
        <template slot="startTimeSearch">
          <el-date-picker
            v-model="searchObj.startTime"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="pickerOption"
            size="small"
            type="datetime"
            placeholder="选择开始时间">
          </el-date-picker>
        </template>

        <!-- 结束时间搜索栏自定义 -->
        <template slot="endTimeSearch">
          <el-date-picker
            v-model="searchObj.endTime"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="pickerOption"
            size="small"
            type="datetime"
            placeholder="选择结束时间">
          </el-date-picker>
        </template>

        <!-- 左上方菜单内容 -->
        <template slot="menuLeft">
          <el-button
            type="success"
            size="small"
            plain
            icon="el-icon-edit"
            @click="handleBatchProcess">
            批量处理
          </el-button>
        </template>

        <!-- 操作列表格自定义 -->
        <template slot="process" slot-scope="scope">
          <div>
            <el-button
              v-if="scope.row['sfcl'] === 0 || scope.row['sfcl'] === -1"
              type="primary"
              size="small"
              icon="el-icon-edit"
              @click="handleProcess(scope.row['id'])">
              处理报警
            </el-button>
            <el-button
              v-else
              type="success"
              size="small"
              icon="el-icon-check">
              已处理
            </el-button>
          </div>
        </template>
      </avue-crud>

      <!-- 处理区域报警弹窗 -->
      <el-dialog 
        title="处理区域报警"
        append-to-body
        :visible.sync="areaAlarmDialog"
        :close-on-click-modal="false" 
        :before-close="closeAreaAlarmDialog"
        width="60%"
      > 

        <!-- 内容 -->
        <el-form :model="processForm" :rules="processRules" ref="processForm">
          <el-form-item label="处理结果" prop="result">
            <el-input 
              type="textarea" 
              v-model="processForm.result" 
              placeholder="请输入 处理结果">
            </el-input>
          </el-form-item>
        </el-form>

        <!-- 按钮 -->
        <div class="area_alarm_footer">
          <el-button 
            type="primary"
            size="small"
            @click="processAreaAlarm()">
            处 理
          </el-button>
          <el-button 
            size="small"
            @click="closeAreaAlarmDialog()">
            取 消
          </el-button>
        </div>
      </el-dialog>

    </basic-container>
  </div>
</template>

<script>
import { getList, processAreaAlarm } from "@/api/useronduty/areapositionalarm";
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      searchObj: {
        startTime: this.formatStartTime(),
        endTime: this.formatEndTime()
      },
      pickerOption: {
        firstDayOfWeek: 1,
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      form: {},
      data: [],
      loading: true,
      selectionList: [],
      page: {
        pageSize: this.$pageSize,
        currentPage: 1,
        total: 0
      },
      option: {
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchSpan: 5,
        searchMenuSpan: 4,
        border: true,
        index: false,
        menu: false,
        addBtn: false,
        selection: true,
        refreshBtn: true,
        columnBtn: false,
        dialogClickModal: false,
        selectable:(row) => {
          if(row.sfcl === 1) {
            return false;
          }
          return true;
        },
        column: [
          {
            label: "区域名称",
            prop: "qymc",
            align: "center"
          },
          {
            label: "报警类型",
            prop: "bjlx",
            align: "center",
            search: true,
            type: "select",
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=area_alarm_type",
            props: {
              label: "dictValue",
              value: "dictKey"
            }
          },
          {
            label: "开始时间",
            prop: "startTime",
            searchslot: true,
            hide: true,
            search: true
          },
          {
            label: "结束时间",
            prop: "endTime",
            searchslot: true,
            hide: true,
            search: true
          },
          {
            label: "报警信息",
            prop: "bjxx",
            align: "center"
          },
          {
            label: "报警时间",
            prop: "bjsj",
            align: "center"
          },
          {
            label: "位置",
            prop: "wz",
            align: "center"
          },
          {
            label: "处理结果",
            prop: "cljg",
            align: "center"
          },
          {
            label: "反馈",
            prop: "fk",
            align: "center"
          },
          {
            label: "操作",
            prop: "process",
            align: "center",
            slot: true
          }
        ]
      },
      // 处理区域报警弹窗
      areaAlarmDialog: false,
      selectedIds: "",
      processForm: {
        result: ""
      },
      processRules: {
        result: [{ required: true, message: '请输入处理结果', trigger: 'blur' }]
      }
    };
  },
  watch: {
    // 开始时间
    "searchObj.startTime"() {
      let startDate = new Date(this.searchObj.startTime);
      let endDate = new Date(this.searchObj.endTime);
      if (startDate.getTime() > endDate.getTime()) {
        this.searchObj.endTime = this.searchObj.startTime.substring(0, this.searchObj.startTime.indexOf(" ")) + " 23:59:59";
      }
    },

    // 结束时间
    "searchObj.endTime"() {
      let startDate = new Date(this.searchObj.startTime);
      let endDate = new Date(this.searchObj.endTime);
      if (startDate.getTime() > endDate.getTime()) {
        this.searchObj.startTime = this.searchObj.endTime.substring(0, this.searchObj.endTime.indexOf(" ")) + " 00:00:00";
      }
    }
  },
  computed: {
    ...mapGetters(["permission"]),
    
    // 区域告警列表勾选项ID
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    }

  },
  mounted() {
    this.onLoad(this.page);
  },
  methods: {

    // 获取开始时间
    formatStartTime() {
      let date = new Date(new Date().getTime() - 86400000 * 7);
      var year = date.getFullYear();
      var month = this.getFullNum(date.getMonth() + 1);
      var day = this.getFullNum(date.getDate());
      return year + "-" + month + "-" + day + " 00:00:00";
    },

    // 获取结束时间
    formatEndTime() {
      let date = new Date();
      var year = date.getFullYear();
      var month = this.getFullNum(date.getMonth() + 1);
      var day = this.getFullNum(date.getDate());
      return year + "-" + month + "-" + day + " 23:59:59";
    },

    // 补全时间
    getFullNum(num) {
      if (num < 10) {
        return "0" + num;
      }
      return num;
    },
    
    // 勾选
    selectionChange(list) {
      this.selectionList = list;
    },

    // 清空勾选
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },

    // 清空搜索条件
    searchReset() {
      this.searchObj = {};
      this.onLoad(this.page);
    },

    // 搜索条件改变事件
    searchChange(params, done) {
      this.searchObj = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },

    // 换页数
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
      this.onLoad(this.page);
    },

    // 换每页显示数量
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.onLoad(this.page);
    },

    // 刷新
    refreshChange() {
      this.onLoad(this.page, this.searchObj);
    },

    // 获取表格内容
    onLoad(page, params = {}) {
      this.loading = true;
      getList(
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.searchObj)
      ).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.selectionClear();
      });
    },

    /**
     * 弹窗：处理区域报警
    */

    // 点击批量处理按钮
    handleBatchProcess() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.selectedIds = this.ids;
      this.areaAlarmDialog = true;
    },

    // 点击处理报警按钮
    handleProcess(id) {
      this.selectedIds = id;
      this.areaAlarmDialog = true;
    },

    // 关闭、取消弹窗
    closeAreaAlarmDialog() {
      this.selectedIds = "";
      this.processForm = {
        result: ""
      };
      this.areaAlarmDialog = false;
      this.selectionClear();
    },

    // 点击保存报警
    processAreaAlarm() {
      this.$refs["processForm"].validate((valid) => {
        if (valid) {
          processAreaAlarm(this.selectedIds, this.processForm.result).then(res => {
            if(res.data.success) {
              this.closeAreaAlarmDialog();
              this.page.currentPage = 1;
              this.onLoad(this.page);
            }
          });
        }
      });
    }

  }
};
</script>

<style lang="scss" scpoed>
.areapositionalarm {
  .avue-crud {
    .avue-crud__search {
      .avue-form__row:nth-child(1) {
        .el-form-item__label {
          text-align: unset;
        }
      }
    }
  }
}

.area_alarm_footer {
  text-align: center;
  margin-top: 15px;

  .el-button {
    width: 100px;
    height: 35px;
  }
}

.el-textarea {
  width: calc(100% - 80px);
}

.el-form-item__error {
  margin-left: 80px;
}
</style>